<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
		<link rel="stylesheet" type="text/css" href="css/gly.css" />
	</head>
	<body>
		<div class="tou">
			垃圾分类清理管理系统
			<div class="gly">
				欢迎小区业主:&nbsp;&nbsp;&nbsp;&nbsp;
				<div class="mingzi">
					<div style="float: left;" th:text="${session.user.realname}"></div>
					<i class="fa fa-angle-down"></i>
				</div>
			</div>
		</div>
		<div class="zuo">
			<div>
				<div class="lan" onclick="xiala(0)">
					<i class="fa fa-volume-up">&nbsp;</i>
					垃圾分类公告栏
					<i class="fa fa-angle-down zhuan"></i>
				</div>
				<ul>
					<li><a href="/tzgg/fenye" target="frame">查询公告列表</a></li>
				</ul>
			</div>
			<div>
				<div class="lan" onclick="xiala(1)">
					<i class="fa fa-list">&nbsp;</i>
					垃圾站点管理
					<i class="fa fa-angle-down zhuan"></i>
				</div>
				<ul>
					<li><a href="/garbage/fenye" target="frame">查询垃圾站</a></li>
				</ul>
			</div>
			<div>
				<div class="lan" onclick="xiala(2)">
					<i class="fa fa-list">&nbsp;</i>
					投诉管理
					<i class="fa fa-angle-down zhuan"></i>
				</div>
				<ul>
					<li><a href="/compliant/tj" target="frame">我要投诉物业</a></li>
					<li><a href="/compliant/fenye" target="frame">我的投诉记录</a></li>
				</ul>
			</div>
			<div>
				<div class="lan" onclick="xiala(3)">
					<i class="fa fa-cog">&nbsp;</i>
					个人信息管理
					<i class="fa fa-angle-down zhuan"></i>
				</div>
				<ul>
					<li><a th:href="@{/user/xg(id=${session.user.id})}" target="frame">个人信息维护</a></li>
				</ul>
			</div>
		</div>
		
		<div class="you">
			<iframe src="/tzgg/fenye" name="frame" scrolling="no" id="k"></iframe>
		</div>
		<script type="text/javascript">
			function xiala(s){
				var zhuan = document.getElementsByClassName("fa fa-angle-down zhuan");
				zhuan[s].style.transform = "rotate(-180deg)";
				var ul = document.getElementsByTagName("ul");
				var li = ul[s].children;//获取ul元素的所有元素子节点
				var li_height = li.length * 5 +"vh";//li总长度
				if(ul[s].style.height == li_height){
					zhuan[s].style.transform = "rotate(0deg)";
					ul[s].style.height = "0"
				}else{
					ul[s].style.height = li_height;
					for(var i=0;i<ul.length;i++){
						if(s != i){
							zhuan[i].style.transform = "rotate(0deg)";
							ul[i].style.height = "0";
						}
					}
				}
			}
		</script>
	</body>
</html>
